import styles from "./index.module.scss";
import text_to_pic from "@/assets/images/imageEdit/text_to_pic.svg";
import pic_to_pic from "@/assets/images/imageEdit/pic_to_pic.svg";
import multi_graph_fusion from "@/assets/images/imageEdit/multi_graph_fusion.svg";
import image_edit from "@/assets/images/imageEdit/image_edit.svg";
import layer_edit from "@/assets/images/imageEdit/layer_edit.svg";
import { Image } from '@douyinfe/semi-ui';
import { useState } from 'react';

export default function MenuBar({onMenuChange }) {
    const [menuList, setMenuList] = useState([
        {
            key: 'text',
            icon: text_to_pic,
            active: true,
            title: '文生图',
            showMainEdit: true,
            showResults: true,
            showBottom: false,
            showHistory: true
        },
        {
            key: 'pic',
            icon: pic_to_pic,
            active: false,
            title: '图生图',
            showMainEdit: true,
            showResults: true,
            showBottom: false,
            showHistory: true
        },
        {
            key: 'multi',
            icon: multi_graph_fusion,
            active: false,
            title: '多图融合',
            showMainEdit: true,
            showResults: true,
            showBottom: false,
            showHistory: true
        },
        {
            key: 'image',
            icon: image_edit,
            active: false,
            title: '图像编辑',
            showMainEdit: true,
            showResults: true,
            showBottom: false,
            showHistory: true   
        },
        {
            key: 'layer',
            icon: layer_edit,
            active: false,
            title: '图层编辑',
            showMainEdit: true,
            showResults: true,
            showBottom: true,
            showHistory: false,
            showLayerHistory:true
        }
    ]); // 侧边栏菜单
    const changeMenu = (menu) => { 
        onMenuChange?.(menu, () => {
            // 更新菜单状态
            setMenuList(prev => prev.map(item => {
                if (item.key === menu.key) {
                    return { ...item, active: true };
                }else {
                    return { ...item, active: false };
                }
            }));
        });
    }

    return (
        <div className={styles.menuBar}>
            {menuList.map(item => (
                <div key={item.key} className={`${styles.menuItem} ${item.active ? 'is-active' : ''}`} onClick={()=> changeMenu(item) }>
                    <Image className={styles.img} src={item.icon} preview={false} draggable={false} />
                    <div className={styles.text}>{item.title}</div>
                </div>
            ))}
        </div>
    )
}